import { Dispatch } from "react";
import MovieTable from "../../components/MovieTable";
import { connect } from "react-redux";
import { IRootState } from "../../redux/reducers/RootReducer";
import MovieAction from '../../redux/actions/MovieAction';
import { IMovieState } from '../../redux/reducers/MovieReducer';
import { IMovieTableEvents } from '../../components/MovieTable';
import { SwicthType } from "../../services/CommonTypes";

function mapStateToProps(state: IRootState):IMovieState {
  return state.movie;
}

function mapDispatchToProps(dispatch: Dispatch<any>):IMovieTableEvents {
    return {
        onLoad(){
            dispatch(MovieAction.fetchMovies({
                page:1,
                limit:10,
                key:""
            }))
        },
        onSwicthChange(type: SwicthType, newState: boolean, id: string){
            dispatch(MovieAction.changeSwitch(type,newState,id));
        },
        async onDelete(id){
           await dispatch(MovieAction.deleteMovie(id));
        },
        onChange(newPage){
            dispatch(MovieAction.fetchMovies({
                page:newPage
            }))
        },
        onKeyChange(key){
            dispatch(MovieAction.setConditionAction({
                key
            }))
        },
        onSearch(){
            dispatch(MovieAction.fetchMovies({
                page:1
            }))
        }
    }
}
// // 返回一个高阶组件
// const HOC = connect(mapStateToProps);
// // 容器组件可以为展示组件提供数据
// const MovieContainer =  HOC(MovieTable);
// 可以组成
export default connect(mapStateToProps,mapDispatchToProps)(MovieTable);

// export default class extends React.Component {
//   render() {
//     return (
//       <h1>
//         电影列表页 <MovieContainer />
//       </h1>
//     );
//   }
// }

// 仓库里面有数据，但没有界面

// MovieTable组件有界面，但没有无数据

// react-redux
